<template>
  <div class="table">
    <el-table :ref="tableType" border :data="tableData" style="width: 100%" @selection-change="selectionChange">
      <el-table-column v-if="selection" type="selection" width="55" :selectable="selectable">
      </el-table-column>

      <el-table-column v-for="(list, index) in column" :key="index" :prop="list.prop" :label="list.label" :width="list.width">
        <template slot-scope="scope">
          <!-- 模板管理 审核状态判断 -->
          <span v-if="list.prop === 'standardState'">{{scope.row.standardState === 1 ? '已确认':'未确认'}}</span>
          <span v-else-if="list.asyncData">{{ list.asyncData.filter(item => item.value == scope.row[list.prop] )[0].text}}</span>
          <span v-else>{{ list.formatter ? (scope.row[list.prop] == 0 ? '已确认' : '未确认') : scope.row[list.prop]}}</span>
        </template>
      </el-table-column>
      <slot></slot>
    </el-table>

    <!-- <span v-else-if="list.standardState">{{321}}</span> -->

    <div class="margin-t-10 padding-bottom-20 text-center" v-if="pagination">
      <el-pagination @current-change="changePage" @size-change="changePage" :current-page.sync="page.pageIndex" :page-size="page.pageSize" layout="total, prev, pager, next, jumper" prev-text="上一页" next-text="下一页" :total="total || tableData.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getStorage } from '../../config/utils'
export default {
  name: 'index',
  props: {
    tableType: {
      type: String,
      default: 'table'
    },
    tableData: {
      type: Array,
      default: () => []
    },
    column: {
      type: Array,
      default: () => []
    },
    // 选择
    selection: {
      type: Boolean,
      default: false
    },
    selectionFilter: {
      type: Boolean,
      default: false
    },
    // 是否显示分页
    pagination: {
      type: Boolean,
      default: true
    },
    total: {
      type: Number,
      default: 0
    },
    selectionType: {
      type: String
    }
  },
  data() {
    return {
      page: {
        pageSize: 10,
        pageIndex: 1
      }
    }
  },
  methods: {
    selectionChange(val) {
      this.$emit('selectionChange', val)
    },
    changePage() {
      this.$emit('changePage', this.page)
    },
    selectable(row, index) {
      if (this.selectionType && this.selectionType == 'quotePoint') {
        return true
      }
      if (this.selectionFilter) {
        return row.belongPart === getStorage('userInfo').orgId && row.standardState == 0
      }
      return this.selectionFilter
    }
  }
}
</script>

<style scoped lang="scss">
.table {
  width: 100%;
}
</style>
